<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>贪吃蛇反诈知识小课堂</title>
		<link rel="stylesheet" href="css/bootstrap.min.css">

		<style>
			.all {
				width: 525px;
				height: 725px;
				margin: 10px auto;
				background: #808080;
				border-radius: 2%;
			}

			#mycanvas {
				border: 1px solid #BBFFEE;
				margin: 10px auto;
				display: block;
			}

			.fenshu {
				display: flex;
				justify-content: center;
				color: white;
				font-size: 30px;
				margin-top: 10px;
			}

			.box {
				/* border: 1px solid red; */
				width: 490px;
				height: 150px;
				margin: 10px 20px;
			}

			#question {
				/* border: 1px solid yellow; */
				width: 300px;
				height: 150px;
				float: left;
				background-color: #D3D3D3;
			}

			.gongnengqu {
				/* border: 1px solid blue; */
				width: 190px;
				height: 150px;
				float: left;
				background-color: #A9A9A9;
			}

			.rsmallbox {
				width: 15px;
				height: 15px;
				background-color: #DC143C;
				float: left;
				margin: 5px;
			}

			.bsmallbox {
				width: 15px;
				height: 15px;
				background-color: #0000CD;
				float: left;
				margin: 5px;
			}

			.place {
				margin: 35px;

			}

			#subcon {
				font-family: '楷体';
				font-size: 15px;
				padding: 15px 20px;
			}
		</style>

	</head>
	<body>
		<div style="background-color: #00547f;">
			<div class="all">
				<div class="fenshu">
					<span>分数:</span>
					<span id="demo"></span>
				</div>
				<div class="box">
					<div id="question">
						<p id="subcon"></p>
					</div>
					<div class="gongnengqu">
						<!--红色提示正确-->
						<div class="place">
							<div class="rsmallbox"></div><span style="float: left;padding-top: 4px;">正确</span>
						</div>
						<!--蓝色提示错误-->
						<div class="place">
							<div class="bsmallbox"></div><span style="float: left;padding-top: 4px;">错误</span>
						</div>
						<div class="btn-group-vertical btn" role="group" aria-label="" style="padding-left: 20px;">
							<button type="button" class="btn-info start btn-sm" style="background-color:
			#2F4F4F ;">开始</button>
							<button type="button" class="btn-info btn-sm stop" style="background-color:
			#2F4F4F ;">退出</button>
							<button type="button" class="btn-info btn-sm help" style="background-color:
			#2F4F4F ;">帮助</button>
						</div>
					</div>
				</div>
				<canvas id="mycanvas" width="500" height="500"></canvas>
			</div>
		</div>


		<script src="js/jquery-3.5.1.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			var sub = [];
			var subindex = 0;
			var nubindex = -1;
			window.onload = function() {
				// 获取到画布的数据
				let canvas = document.getElementById('mycanvas');
				let ctx = canvas.getContext('2d');
				// 方向 0便是左 1表示上 2表示右 3表示下
				let direction = 68;
				// 计时器
				let timer = null;
				// 蛇的长度
				let len = 10;
				//分数
				let score = 15;
				// 蛇的初始速度
				document.getElementById("demo").innerHTML = score;
				let x = 20;
				let y = 20;
				let speed = 500;
				let size = 20;
				// 用于存放蛇的运动轨迹
				let map = [];
				// 食物坐标
				let foodX1;
				let foodY1;
				let foodX2;
				let foodY2;
				//获取题目数据
				if (sub.length == 0) {
					$.getJSON("js/question.json", function(result) {
						sub = result;

					});
				}
				for (let i = 0; i < 25; i++) {
					ctx.moveTo(i * 20, 0);
					ctx.lineTo(i * 20, 500);
					ctx.moveTo(0, i * 20);
					ctx.lineTo(500, i * 20);
					ctx.strokeStyle = '#BBFFEE';
					ctx.stroke();
				}
				ctx.fillStyle = 'black';
				//点击开始后食物与小蛇才出现
				var food = 1;

				function game() {
					if (food) {
						getFood1();
						getFood2();
						food = 0;
					}
					for (let i = 0; i < 25; i++) {
						ctx.moveTo(i * 20, 0);
						ctx.lineTo(i * 20, 500);
						ctx.moveTo(0, i * 20);
						ctx.lineTo(500, i * 20);
						ctx.strokeStyle = '#BBFFEE';
						ctx.stroke();
					}
					ctx.fillStyle = 'black';
					// 设置运动方向
					switch (direction) {
						case 65:
							x = x - size;
							break;
						case 87:
							y = y - size;
							break;
						case 68:
							x = x + size;
							break;
						case 83:
							y = y + size;
							break;
					}
					//游戏结果判断
					if (score >= 50) {
						clearInterval(timer);
						alert('恭喜你！游戏胜利！');
						setTimeout(function() {
							window.location.reload();
						}, 1000)
					} else if (score < 0) {
						clearInterval(timer);
						alert('游戏失败，不要气馁');
						location.reload();
					}
					// 边界碰撞检测
					if (x >= canvas.width || x < 0 || y >= canvas.height || y < 0) {
						clearInterval(timer);
						alert("GAME OVER!" + "    得分为" + score + "分");
						location.reload();
					}

					// 自身碰撞检测
					let carch = map.some(elm => elm.x === x && elm.y === y);
					if (carch) {
						clearInterval(timer);
						alert("GAME OVER!" + "    得分为" + score + "分");
						location.reload();
					}
					if (map.length > len) {
						// 数据长度大于蛇的长度 删除数组中第一个元素
						let first = map.shift();
						ctx.clearRect(first.x, first.y, size, size)
					}
					map.push({
						x,
						y
					})
					ctx.fillRect(x, y, size, size)
					// 判断蛇是否吃到食物
					//红色食物选项
					var res;
					if (foodX1 == x && foodY1 == y) {
						res = sub[nubindex++].answer;
						console.log(res);
						if (res === '1') {
							len++;
							score += 5;
							document.getElementById("demo").innerHTML = score;
							getFood1();
							$("#subcon").text(sub[subindex].title);
							subindex++;
						} else {
							score -= 7;
							document.getElementById("demo").innerHTML = score;
							getFood1();
							$("#subcon").text(sub[subindex].title);
							subindex++;
						}
					}
					//蓝色食物选项
					if (foodX2 == x && foodY2 == y) {
						res = sub[nubindex++].answer;
						console.log(res);
						if (res === '0') {
							len++;
							score += 5;
							document.getElementById("demo").innerHTML = score;
							getFood2();
							$("#subcon").text(sub[subindex].title);
							subindex++;
						} else {
							score -= 7;
							document.getElementById("demo").innerHTML = score;
							getFood2();
							$("#subcon").text(sub[subindex].title);
							subindex++;
						}
					}
					if (sub.length === subindex) {
						subindex = 0;
					}
					if (sub.length === nubindex) {
						nubindex = 0;
					}
				}
				//红色食物   代表正确
				function getFood1() {
					foodX1 = Math.floor(Math.random() * 25) * 20;
					foodY1 = Math.floor(Math.random() * 25) * 20;
					// 判断随机出现的食物是否是在蛇的身上 如果是就重新调用
					let has = map.some(elm => elm.x === foodX1 && elm.y === foodY1);
					if (has) {
						return getFood1();
					}
					ctx.fillStyle = 'red'
					ctx.fillRect(foodX1, foodY1, size, size);
				}
				//蓝色食物   代表错误
				function getFood2() {
					foodX2 = Math.floor(Math.random() * 25) * 20;
					foodY2 = Math.floor(Math.random() * 25) * 20;
					// 判断随机出现的食物是否是在蛇的身上 如果是就重新调用
					let has = map.some(elm => (elm.x === foodX2 && elm.y === foodY2) || (foodX1 === foodX2 && foodY1 ===
						foodY2));
					if (has) {
						return getFood2();
					}
					ctx.fillStyle = 'blue'
					ctx.fillRect(foodX2, foodY2, size, size);
				}
				//开始按钮
				var flag = 0;
				var start = document.querySelector('.start');
				//暂停按钮
				var stop = document.querySelector('.stop');
				stop.disabled = true;
				start.addEventListener('click', function() {
					$("#subcon").text(sub[subindex].title);
					subindex++;
					nubindex++;
					timer = setInterval(game, speed);
					this.disabled = true;
					flag = 1;
					stop.disabled = false;

					// console.log('点击了');
				})
				stop.addEventListener('click', function() {
					window.location.href = '中年界面.html'
				})
				// 键盘事件用于改变方向
				document.onkeyup = function(e) {
					console.log(e.keyCode);
					if (e.keyCode == 87 || e.keyCode == 83 || e.keyCode == 65 || e.keyCode == 68)
						if (e.keyCode != direction + 5 && e.keyCode != direction - 5 && e.keyCode != direction + 3 && e
							.keyCode != direction - 3) {
							direction = e.keyCode;
						}

				}
				//帮助按钮
				var help = document.querySelector(".help");
				help.addEventListener('click', function() {
					alert(
						'本游戏采用反诈知识问答的形式，玩家需要根据题目判断对与错并且操纵小蛇吃掉相应的方块(红色代表正确；蓝色代表错误)，初始分为15分，答对加5分，答错扣7分；玩家分数低于0分则游戏失败，达至150分则游戏胜利----------备注：按键W：向上；按键D:向右；按键A:向左；按键S:向下；'
						);
				})
			}
		</script>
		<script src="vue/axios.min.js"></script>
	</body>
</html>
